<template>
    <div :style="{height : h}" class="activity">
        <header-1 ref="t1">
            <template v-slot:center>
               <span class="center">
                    已报名活动
               </span>
            </template>
        </header-1>

        <van-tabs v-model="active" line-width="25px" line-height="4px" title-active-color="#ff6e53" ref="t2">
            <van-tab title="进行中">
               <div class="ing">
                    <img class="img2" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u4059.png" />
                    <div class="foot">-暂无相关数据-</div>
               </div>
            </van-tab>
            <van-tab title="全部活动">
                
        <div class="box" v-for="(item,index) in arr" :key="item.id">
           <div class="box_top">
                <div class="box_top_1">
                    <span class="box_top_2">NO.{{index+1}}</span>
                    <div class="box_top_3">
                        <span class="box_top_4">{{item.name}}</span>
                        <span>活动细则：{{item.detail}}</span>
                        <span>用户类型：{{item.obj}}</span>
                        <span v-if="item.ask">店铺要求：{{item.ask}}</span>
                        <span>使用方式：{{item.way}}</span>
                        <span>活动日期：{{item.Eventdate}}</span>
                        <span>报名日期：{{item.Registrationdate}}</span>
                        <span v-if="item.money">报名费用：{{item.money}}</span>
                    </div>
                </div>
                <div class="topr">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>进行中</span>
                </div>
           </div>
           <div class="box_bottom">
            <div></div>
            <div @click="use">使用详情</div>
           </div>
        </div>
        <div class="foot">-没有更多数据了-</div>
            </van-tab>
        </van-tabs>




    </div>
</template>
<script>
import header1 from '../../components/BS/header1View.vue'

export default {
   name:'ActivityedView',
   components:{
        header1   
    },
    data(){
        return{
            active: 1,
            arr : [{
                name : '新店八折特惠',
                detail:'满500P减50P(减免部分,平台承担10P,商家承担40P)',
                obj: '所有用户',
                way:'移动端',
                Eventdate:'2021-11-01 至 2021-11-30',
                Registrationdate:'长期',
                money : '₱10.00',
                ask : '限早餐店铺',
            }],
            h: '',
            h1:''
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
    },
    methods:{
        use(){
            this.$router.push('okavi5')
        }
    }
}
</script>
<style scoped>
.activity{
    background-color:#f5f5f5;
}
.box{
    width: 90%;
    margin: 20px auto;
}
.box_top{
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 15px;
    display: flex;
    position: relative;
}
.box_bottom{
    border-radius: 15px;
    width: 100%;
    height: 40px;
    margin-top: 1px;
    background-color: #FFFFFF;
    display: flex;
    font-size: 15px;
    color: #ff6e53;
    justify-content: space-around;
    align-items: center;
}
.box_top_1{
    display: flex;
    width: 90%;
    height: 100%;
    margin: 10px auto;
}
.box_top_2{
    font-size: 15px;
    color: #797979;
    margin-top: 6px;
}
.box_top_3{
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #fb8974;
    margin-left: 10px;
}
.box_top_3 span{
    margin: 5px;
}
.box_top_4{
    font-size: 15px;
    color: #ff6e53;
    margin-bottom: 5px;
}
.foot{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    color: #797979;
}
.topr{
    font-size: 15px;
    width: 75px;
    height: 20px;
    background-color: #0066cc;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
.img1{
    margin-right: 5px;
}
.img2{
    display: inline-flex;
    margin: 50px auto;
}
.ing{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 150px auto;
}
</style>